<template>
    <div class="time-tabs">
        <div
            v-for="tab in tabs"
            :key="tab.key"
            class="time-tab"
            :class="{ 'active': activeTab === tab.key }"
            @click="handleTabClick(tab.key)"
            :style="{...itemStyle}"
        >
            <span v-if="!tab.svg">{{ tab.label }}</span>
            <svg-icon :icon-class="tab.svg" v-else></svg-icon>
        </div>
    </div>
</template>

<script>
export default {
    name: 'TimeTabs',
    props: {
        // 当前激活的标签页
        value: {
            type: String,
            default: 'today'
        },
        // 标签页数据
        tabs: {
            type: Array,
            default: () => [
                {key: 'today', label: '本日'},
                {key: 'month', label: '本月'},
                {key: 'quarter', label: '本季度'},
                {key: 'year', label: '本年'}
            ]
        },
        // 尺寸
        size: {
            type: String,
            default: 'default',
            validator: value => ['small', 'default', 'large'].includes(value)
        },
        // 主题颜色
        color: {
            type: String,
            default: '#1890FF'
        },
        // 每项样式
        itemStyle: {
            type: Object,
            default: () => {
            }
        }
    },
    data() {
        return {
            activeTab: this.value
        }
    },
    watch: {
        value(newVal) {
            this.activeTab = newVal
        },
        activeTab(newVal) {
            this.$emit('input', newVal)
            this.$emit('change', newVal)
        }
    },
    computed: {
        tabStyle() {
            return {
                '--primary-color': this.color,
                '--primary-color-light': this.color + '1a' // 添加透明度
            }
        }
    },
    methods: {
        handleTabClick(key) {
            this.activeTab = key
        }
    }
}
</script>

<style lang="scss" scoped>
.time-tabs {
    display: flex;
    align-items: center;

    .time-tab {
        padding: 6px 16px;
        font-size: 14px;
        color: #666;
        background-color: transparent;
        border: 1px solid #d9d9d9;
        cursor: pointer;
        transition: all 0.3s ease;
        user-select: none;
        white-space: nowrap;

        &:hover {
            color: var(--primary-color, #1890FF);
            border-color: var(--primary-color, #1890FF);
            background-color: var(--primary-color-light, rgba(24, 144, 255, 0.1));
        }

        &.active {
            color: var(--primary-color, #1890FF);
            border-color: var(--primary-color, #1890FF);

            &:hover {
                color: #fff;
                background-color: var(--primary-color, #1890FF);
            }
        }
    }

    // 小尺寸
    &.small {
        .time-tab {
            padding: 4px 12px;
            font-size: 12px;
        }
    }

    // 大尺寸
    &.large {
        .time-tab {
            padding: 8px 20px;
            font-size: 16px;
        }
    }
}

// 不同主题色彩
.time-tabs.theme-green {
    --primary-color: #52C41A;
    --primary-color-light: rgba(82, 196, 26, 0.1);
}

.time-tabs.theme-orange {
    --primary-color: #FA8C16;
    --primary-color-light: rgba(250, 140, 22, 0.1);
}

.time-tabs.theme-red {
    --primary-color: #F5222D;
    --primary-color-light: rgba(245, 34, 45, 0.1);
}

.time-tabs.theme-purple {
    --primary-color: #722ED1;
    --primary-color-light: rgba(114, 46, 209, 0.1);
}
</style>
